<template>
    <div>
        <!-- 轮播图 -->
        <div class="home-swipe">
            <mt-swipe :auto="4000">
                <mt-swipe-item v-for="item in photos" :key="item.id">
                    <img :src="item.src">
                </mt-swipe-item>
            </mt-swipe>
        </div>

        <!-- 六宫格 -->
        <div class="grid">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <a href="#">
                        <img src="src/assets/cs.png" alt="">
                        <div class="mui-media-body">京东超市</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <a href="#">
                        <img src="src/assets/ht.png" alt="">

                        <div class="mui-media-body">海囤全球</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <a href="#">
                        <img src="src/assets/ss.png" alt="">
                        <div class="mui-media-body">京东时尚</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <a href="#">
                        <img src="src/assets/sx.png" alt="">
                       
                        <div class="mui-media-body">京东生鲜</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <a href="#">
                        <img src="src/assets/dj.png" alt="">
                       
                        <div class="mui-media-body">京东到家</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <a href="#">
                        <img src="src/assets/cz.png" alt="">
                        <div class="mui-media-body">充值缴费</div>
                    </a>
                </li>

            </ul>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      photos: [
        { id: 1, src: "src/assets/1.jpg" },
        { id: 2, src: "src/assets/2.jpg" },
        { id: 3, src: "src/assets/3.jpg" }
      ]
    };
  },

  computed: {},

  methods: {},

  components: {}
};
</script>

<style lang="scss" scoped>
.home-swipe {
  height: 200px;
  .mint-swipe-item {
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.grid{
    img{
        width: 60px;
        height: 60px;
    }
}
</style>
